000000 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

テーブルの基本３　テーブルに色をつける


　HTMLタグのページ　　テーブルの背景をかえる　全体の色・セルの色・テーブルに背景をつける
・テーブルの線に色をつける


テーブル全体に色をつける


テーブル全体を同じ色で塗りつぶす時は、<table bgcolor="色の指定">とする

タグ
<table height="100" width="100" border="1" bgcolor="#0000FF">
<tr>
<td>
</td>
</tr>
</table>

*この場合はテーブルの中を0000ff（青）に指定した
*セルの数が増えてもタグは一つで全体の色が指定できます


ブラウザの表示
　
　


セルごとに色を変える

セルごとに色を変えるにはそれぞれのセルごと（<td>～</td>）にbgcolor="●●"タグを入れ指定する

タグ
<table width="200" border="1">
<tr>
<td height="100" bgcolor="#0000FF">　１</td>
<td height="100" bgcolor="#FFFF00">　２</td>
</tr>
<tr>
<td height="100" bgcolor="#FF0000">　３</td>
<td height="100" bgcolor="#00FF00">　４</td>
</tr>
</table>
　
ブラウザ表示
　
　１　２
　３　４


行ごとに色を指定する

行ごとに色を指定する場合は行指定のタグ<tr>にbgcolor="●●"を指定する


タグ
<table width="200" border="1">
<tr bgcolor="#FF00FF">
<td height="100">1　</td>
<td height="100">2　</td>
</tr>
<tr bgcolor="#FFCC00">
<td height="100">3　</td>
<td height="100">4　</td>
</tr>
</table>

＊　行（横一列が同じ色になります）


ブラウザ表示
　
　1　2
　3　4
　



テーブルに背景を入れる

テーブル全体に背景を入れるには、<table>タグにbackground="背景画像のURL（ファイル名）"を指定する


タグ
<table width="400" border="2" background="画像のURL">
<tr>
<td height="100">　</td>
<td height="100">　</td>
</tr>
<tr>
<td height="100">　</td>
<td height="100">　</td>
</tr>
</table>

*　ここではこの背景画像を使用しています


ブラウザ表示
　　
　　
　

*　画像の持ち出しは禁止させていただきます!!!


テーブルの線に色をつける　<table bordercolor="#●●">　


テーブルの枠線に色をつけるには<table>タグに　bordercolor="●●"を指定します


タグ
<table width="200" height="100" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td>　</td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
</tr>
</table>


ブラウザ表示
　
　　
　　
　

cellspacingをつけると枠の幅が出来るので2縦線を使ったようになります

タグ
<table width="200" height="100" border="1" cellspacing="4" bordercolor="#FF0000">
<tr>
<td>　</td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
</tr>
</table>


ブラウザ表示
　
　　
　　
© Rakuten Group, Inc.
X